{extend name="base/base-goods-layout"/}
{block name="linkCss"}
<link rel="stylesheet" href="__STATIC__/css/goods/goods-issue.css">
{/block}

{block name="breadcrumb"}
<a>商家管理中心</a>
<a>商品</a>
<a>商品发布</a>
{/block}

{include file="public/header" /}
{block name="main"}
<div class="mwrap">
    <div class="step-nav">
        <ul>
            <li {if $class_id == "" && $op ==""} class="red" {/if}>
            <h3>STEP 1</h3>
            <h2>选择商品分类</h2>
            <i>></i>
            </li>
            <li {if $class_id != ""} class="red" {/if}>
            <h3>STEP 2</h3>
            <h2>填写商品信息</h2>
            <i>></i>
            </li>
            <li {eq name="op" value="image"} class="red" {/eq}>
            <h3>STEP 3</h3>
            <h2>商品图片上传</h2>
            <i>></i>
            </li>
            <li>
                <h3>STEP 4</h3>
                <h2>平台审核信息</h2>
            </li>
        </ul>
    </div>
    {if $class_id == '' && $op == ''}
    <div id="section1">
        <div class="sc layui-col-space20">
            <div class="layui-col-md4 layui-col-xs4">
                <div class="sel-box">
                    <ul>
                        <li>
                            <a class="selected" href="javascript:void(0)">母婴商品<i>></i></a>
                        </li>
                        <li>
                            <a href="javascript:void(0)">母婴商品<i>></i></a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="layui-col-md4 layui-col-xs4">
                <div class="sel-box">
                    <ul>
                        <li>
                            <a class="selected" href="javascript:void(0)">奶粉品牌<i>></i></a>
                        </li>
                        <li>
                            <a href="javascript:void(0)">奶粉品牌<i>></i></a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="layui-col-md4 layui-col-xs4">
                <div class="sel-box">
                    <ul>
                        <li>
                            <a href="javascript:void(0)">温妮<i>></i></a>
                        </li>
                        <li>
                            <a class="selected" href="javascript:void(0)">温妮<i>></i></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="show-select">
            <span>您当前选择的商品类别是：</span>
            <span class="layui-breadcrumb" lay-separator=">">
                      <a><cite>母婴商品</cite></a>
                      <a><cite>奶粉品牌</cite></a>
                      <a><cite>温妮</cite></a>
                    </span>
        </div>
        <a class="layui-btn next" href="{:think\\Url::build('issue','class_id=10001')}">下一步，填写商品信息</a>
    </div>
    {elseif $class_id != ''/}
    <div id="section2"  >
        <div class="sc info-wrap">
            <form class="layui-form layui-form-pane" action="">
                <div class="title">
                    <h3>
                        <i class="iconfont icon-bianji"></i>
                        商品基本信息
                        <span><em class="blue">*</em>表示使用管易erp必填，否则不用填</span>
                        <span><em class="red">*</em>表示该项必填</span>
                    </h3>
                </div>
                <div class="info-form">
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品分类</label>
                        <div class="layui-inline">
                            <p>母婴商品 -> 纸尿裤 -> 尤妮佳moony </p>
                        </div>
                        <div class="layui-inline">
                            <a href="" class="layui-btn layui-btn-sm layui-btn-normal">编辑</a>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">关联分类</label>
                        <div class="layui-inline">
                            <a href="" class="layui-btn layui-btn-sm layui-btn-normal ml-10">添加分类</a>
                        </div>
                        <div class="layui-inline">
                            <select name="">
                                <option value="">奶粉品牌</option>
                            </select>
                        </div>
                        <div class="layui-inline">
                            <p>已关联分类：<span>无</span></p>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><em class="red">*</em>商品条码</label>
                        <div class="layui-input-inline">
                            <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><em class="green">*</em>供应商货号</label>
                        <div class="layui-input-inline">
                            <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-form-mid layui-word-aux">注：代发商品须填上此项</div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><em class="blue">*</em>商品代码</label>
                        <div class="layui-inline">
                            <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-inline">
                            <a href="" class="layui-btn layui-btn-sm layui-btn-normal">查询</a>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><em class="red">*</em>商品件数</label>
                        <div class="layui-input-inline">
                            <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-form-mid layui-word-aux">套装商品里所含单品件数</div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><em class="red">*</em>商品名称</label>
                        <div class="layui-input-inline">
                            <input type="text" name="username" lay-verify="required|goodsname" placeholder="请输入" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-form-mid layui-word-aux">商品标题名称长度至少10个字符，最长50个汉字</div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><em class="red">*</em>商品简称</label>
                        <div class="layui-input-inline">
                            <input type="text" name="username" lay-verify="required|goodsname" placeholder="请输入" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-form-mid layui-word-aux">商品简短名称</div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><em class="red">*</em>保质期（天）</label>
                        <div class="layui-input-inline">
                            <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-form-mid layui-word-aux">保质期（天）</div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label"><em class="red">*</em>到期日期</label>
                            <div class="layui-inline">
                                <input type="text" name="date" id="date1" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline"><p>商品过期日期</p></div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><em class="red">*</em>产地</label>
                        <div class="layui-input-inline">
                            <input type="text" name="username" lay-verify="required|goodsname" placeholder="请输入" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-form-mid layui-word-aux">商品产地</div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">商品关键字</label>
                        <div class="layui-input-block">
                            <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
                        </div>
                        <div class="layui-input-block">
                            <span class="text-tips">多个关键字请用空格分开</span>
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">促销提示</label>
                        <div class="layui-input-block">
                            <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
                        </div>
                        <div class="layui-input-block">
                            <span class="text-tips">促销提示不能超过140个汉字</span>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><em class="red">*</em>商品价格</label>
                        <div class="layui-input-inline">
                            <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                            <a class="layui-btn layui-btn-sm layui-btn-normal tag">元</a>
                        </div>
                        <div class="layui-inline">
                            <span class="text-tips">价格必须是0.01~9999999之间的数字，且不能高于市场价。</span>
                            <span class="text-tips">此价格为商品实际销售价格，如果商品存在规格，该价格显示最低价格。</span>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">市场价</label>
                        <div class="layui-input-inline">
                            <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                            <a class="layui-btn layui-btn-sm layui-btn-normal tag">元</a>
                        </div>
                        <div class="layui-input-inline" style="width: 80px;">
                            <input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="switchTest" lay-text="显示|隐藏" title="是否显示">
                        </div>
                        <div class="layui-inline">
                            <span class="text-tips" style="line-height: 26px">价格必须是0.01~9999999之间的数字，此价格仅为市场参考售价，请根据该实际情况认真填写。</span>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><em class="red">*</em>商品领域</label>
                        <div class="layui-inline">
                            <input type="radio" name="gtype" value="跨境商品" title="跨境商品" checked="">
                            <input type="radio" name="gtype" value="国内商品" title="国内商品">
                        </div>
                        <div class="layui-input-block"><span class="text-tips">选择商品所属领域，跨境商品、国内商品，请根据实际情况认真选择。</span></div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><em class="red">*</em>商品税收</label>
                        <div class="layui-input-inline">
                            <select name="">
                                <option value="">请选择商品税收</option>
                            </select>
                        </div>
                        <div class="layui-form-mid layui-word-aux">税收提示：11.9%，32.9%，请根据实际情况认真填写。</div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><em class="red">*</em>销售终端</label>
                        <div class="layui-inline">
                            <input type="checkbox" name="client[pc]" title="电脑端">
                            <input type="checkbox" name="like[app]" title="APP端" checked>
                            <input type="checkbox" name="like[wap]" title="Wap端">
                        </div>
                        <div class="layui-inline"><span class="text-tips">只有钩选的终端才能展示商品。</span></div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><em class="red">*</em>商品仓库</label>
                        <div class="layui-inline">
                            <select name="">
                                <option value="">请选择商品仓库</option>
                            </select>
                        </div>
                        <div class="layui-inline">
                            <a href="" class="layui-btn layui-btn-sm layui-btn-normal">查询</a>
                        </div>
                    </div>
                    <div class="layui-form-item  layui-form-text">
                        <label class="layui-form-label"><em class="red">*</em>商品图片</label>
                        <div class="layui-input-block">
                            <div class="layui-upload">
                                <div class="layui-upload-list">
                                    <img class="layui-upload-img" id="preview" src="__STATIC__/images/goods/nopic.png">
                                    <p id="uploadtext"></p>
                                </div>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <p>上传商品默认主图，如多规格值时将默认使用该图或分规格上传各规格主图；支持jpg、gif、png格式上传，建议使用<span class="red">尺寸800x800像素以上、大小不超过1M的正方形图片</span></p>
                        </div>
                        <button type="button" class="layui-btn" id="gpic">上传图片</button>
                    </div>
                </div>
                <div class="title">
                    <h3>
                        <i class="iconfont icon-bianji"></i>
                        拼团设置
                        <span><em class="red">*</em>表示该项必填</span>
                    </h3>
                </div>
                <div class="info-form">
                    <div class="layui-form-item">
                        <label class="layui-form-label"><em class="red">*</em>是否参与拼团</label>
                        <div class="layui-input-inline" style="width: 80px;">
                            <input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="switchTest" lay-text="显示|隐藏" title="是否显示">
                        </div>
                        <div class="layui-inline">
                            <span class="text-tips" style="line-height: 26px">只有钩选的终端才能显示拼团功能。</span>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><em class="red">*</em>拼团类型</label>
                        <div class="layui-input-inline">
                            <select name="">
                                <option value="">请选择拼团模式</option>
                            </select>
                        </div>
                        <div class="layui-form-mid layui-word-aux">常规拼团模式：在成团后，自动生成订单；抽奖活动模式：在成团后，到活动时间结束后才生成订单</div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><em class="red">*</em>拼团价</label>
                        <div class="layui-input-inline">
                            <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><em class="red">*</em>成团人数</label>
                        <div class="layui-input-inline">
                            <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-form-mid layui-word-aux">设定成团人数</div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label"><em class="red">*</em>活动开始时间</label>
                            <div class="layui-inline">
                                <input type="text" name="date" id="date2" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline"><p>此项为抽奖活动模式设定活动开始时间</p></div>
                    </div>
                </div>
                <div class="title">
                    <h3>
                        <i class="iconfont icon-bianji"></i>
                        商品详情描述
                    </h3>
                </div>
                <div class="info-form">
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">商品描述</label>
                        <div class="layui-input-block">
                            <div class="richtext">
                                <textarea id="richtext" style="display: none;"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="title">
                    <h3>
                        <i class="iconfont icon-bianji"></i>
                        商品物流信息
                        <span><em class="red">*</em>表示该项必填</span>
                    </h3>
                </div>
                <div class="info-form">
                    <div class="layui-form-item">
                        <label class="layui-form-label"><em class="red">*</em>商品重量</label>
                        <div class="layui-input-inline">
                            <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                            <a class="layui-btn layui-btn-sm layui-btn-normal tag">kg</a>
                        </div>
                    </div>
                </div>
                <div class="title">
                    <h3>
                        <i class="iconfont icon-bianji"></i>
                        售后保障信息
                        <span><em class="blue">*</em>表示使用管易erp必填，否则不用填</span>
                        <span><em class="red">*</em>表示该项必填</span>
                    </h3>
                </div>
                <div class="info-form">
                    <div class="layui-form-item">
                        <label class="layui-form-label"><em class="blue">*</em>退货仓库</label>
                        <div class="layui-inline">
                            <select name="">
                                <option value="">请选择商品仓库</option>
                            </select>
                        </div>
                        <div class="layui-inline">
                            <a href="" class="layui-btn layui-btn-sm layui-btn-normal">查询</a>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><em class="blue">*</em>退货地址</label>
                        <div class="layui-input-inline">
                            <input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-form-mid layui-word-aux">ERP自动推送，此地址将会在商家审核通过退货申请后显示给用户</div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><em class="red">*</em>是否开发票</label>
                        <div class="layui-input-inline" style="width: 80px;">
                            <input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="switchTest" lay-text="否|是" title="">
                        </div>
                        <div class="layui-inline">
                            <span class="text-tips" style="line-height: 26px">注明是否显示开发票。</span>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label red"><em class="red">*</em>7天无理由退货</label>
                        <div class="layui-input-inline" style="width: 80px;">
                            <input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="switchTest" lay-text="否|支持" title="">
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">售后服务</label>
                        <div class="layui-input-block">
                            <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
                        </div>
                        <div class="layui-input-block">
                            <span class="text-tips">售后服务如不填写，将调用 "商家管理中心 -> 商品 -> 售后服务" 中自定义的售后服务不能超过200个汉字</span>
                        </div>
                    </div>
                </div>

                <div class="title">
                    <h3>
                        <i class="iconfont icon-bianji"></i>
                        其他信息
                        <span><em class="red">*</em>表示该项必填</span>
                    </h3>
                </div>
                <div class="info-form">
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">包装清单</label>
                        <div class="layui-input-block">
                            <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
                        </div>
                        <div class="layui-input-block">
                            <span class="text-tips">包装清单不能超过200个汉字</span>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">本店分类</label>
                        <div class="layui-inline">
                            <select name="">
                                <option value="">请选择</option>
                            </select>
                        </div>
                        <div class="layui-inline">
                            <a href="" class="layui-btn layui-btn-sm layui-btn-normal">新增分类</a>
                        </div>
                        <div class="layui-input-block">
                                        <span class="text-tips">
                                            商品可以从属于店铺的多个分类之下，店铺分类可以由 "商家管理中心 -> 店铺 -> 店铺分类" 中自定义
                                        </span>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品推荐</label>
                        <div class="layui-input-inline" style="width: 80px;">
                            <input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="switchTest" lay-text="隐藏|显示" title="">
                        </div>
                        <div class="layui-inline">
                            <span class="text-tips" style="line-height: 26px">被推荐的商品会显示在店铺首页。</span>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">*</em>商品发布</label>
                        <div class="layui-input-inline">
                            <input type="radio" name="issue" value="立即发布" title="立即发布" checked="">
                            <input type="radio" name="issue" value="发布时间" title="发布时间">
                            <input type="radio" name="issue" value="放入仓库" title="放入仓库">
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">发布日期</label>
                            <div class="layui-inline">
                                <input type="text" name="date" id="date3" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
                <a class="layui-btn next" id="post-info" href="{:think\\Url::build('issue','op=image')}" lay-submit>提交</a>
            </form>
        </div>
    </div>
    {elseif $op == 'image'/}
    <div id="section3" >
        <div class="upload-wrap layui-col-space20">
            <div class="layui-col-md9 layui-col-xs9">
                <div class="imgs-wrap">
                    <div class="title">
                        <h3>
                            图片上传
                        </h3>
                    </div>
                    <form action="" class="layui-form">
                        <ul>
                            <li>
                                <div class="uw">
                                    <img id="t1" src="__STATIC__/images/goods/nopic.png" alt="">
                                    <label>排序:</label>
                                    <input type="number" value="0">
                                    <a href="javascript:void(0)" class="layui-btn layui-btn-primary" id="up1">上传</a>
                                </div>
                            </li>
                            <li>
                                <div class="uw">
                                    <img src="__STATIC__/images/goods/nopic.png" alt="">
                                    <label>排序:</label>
                                    <input type="number" value="0">
                                    <a href="javascript:void(0)" class="layui-btn layui-btn-primary" id="up2">上传</a>
                                </div>
                            </li>
                            <li>
                                <div class="uw">
                                    <img src="__STATIC__/images/goods/nopic.png" alt="">
                                    <label>排序:</label>
                                    <input type="number" value="0">
                                    <a href="javascript:void(0)" class="layui-btn layui-btn-primary" id="up3">上传</a>
                                </div>
                            </li>
                            <li>
                                <div class="uw">
                                    <img src="__STATIC__/images/goods/nopic.png" alt="">
                                    <label>排序:</label>
                                    <input type="number" value="0">
                                    <a href="javascript:void(0)" class="layui-btn layui-btn-primary" id="up4">上传</a>
                                </div>
                            </li>
                            <li>
                                <div class="uw">
                                    <img src="__STATIC__/images/goods/nopic.png" alt="">
                                    <label>排序:</label>
                                    <input type="number" value="0">
                                    <a href="javascript:void(0)" class="layui-btn layui-btn-primary" id="up5">上传</a>
                                </div>
                            </li>
                        </ul>
                    </form>
                </div>
                <a class="layui-btn next" id="post-img" href="{:think\\Url::build('waitsell','op=verify')}" lay-submit>提交</a>
            </div>
            <div class="layui-col-md3 layui-col-xs3">
                <div class="requirement">
                    <h4>上传要求：</h4>
                    <ul>
                        <li>1. 请使用jpg\jpeg\png等格式、单张大小不超过1M的正方形图片。</li>
                        <li>2. 上传图片最大尺寸将被保留为1280像素。</li>
                        <li>3. 每种颜色最多可上传5张图片。</li>
                        <li>4. 通过更改排序数字修改商品图片的排列显示顺序。</li>
                        <li>5. 图片质量要清晰，不能虚化，要保证亮度充足。</li>
                        <li>6. 操作完成后请点下一步，否则无法在网站生效。</li>
                    </ul>
                    <h4>建议:</h4>
                    <ul>
                        <li>1. 主图为白色背景正面图。</li>
                        <li>2. 排序依次为正面图-&gt;背面图-&gt;侧面图-&gt;细节图。</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    {/if}
</div>
{/block}

{block name="linkBotScript"}
<script src="__STATIC__/js/goods.js"></script>
<script src="__STATIC__/js/uploadImgs.js"></script>
{/block}
{block name="botScript"}
<script>
    layui.use(['form','laydate','upload','layedit'],function (form) {
        var laydate = layui.laydate;
        var upload = layui.upload;
        var layedit = layui.layedit;
        layedit.build('richtext'); //建立编辑器
//        日期组件渲染
        laydate.render({
            elem: '#date1'
        });
        laydate.render({
            elem: '#date2'
        });
        laydate.render({
            elem: '#date3'
        });
//        图片上传
        uploadImgs(upload);
//        表单验证
        form.verify({
            goodsname: function(value, item){ //value：表单的值、item：表单的DOM对象
                if(!/^[\S]{10,50}$/.test(value)){
                    return '商品标题名称长度至少10个字符，最长50个汉字';
                }
            }
        });
    });
    //    步骤区块内容切换
    //    $('.mwrap').click(function (e) {
    //        if ($(e.target).hasClass('next')) {
    //            if ($(e.target).attr('lay-submit') === undefined) {
    //                var section = $(e.target).parents('div[id^="section"]').eq(0);
    //                var sectionIndex = section.attr('id').substr(-1,1);
    //                section.hide();
    //                if (section.next().length == 0) {
    //                    section.siblings().eq(1).show();
    //                    $('.step-nav li').eq(0).addClass('red');
    //                    $('.step-nav li').eq(sectionIndex-1).removeClass('red');
    //                }else{
    //                    section.next().show()
    //                    $('.step-nav li').eq(sectionIndex).addClass('red');
    //                    $('.step-nav li').eq(sectionIndex-1).removeClass('red');
    //                }
    //            }
    //        }
    //    });
</script>
{/block}
